<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  body{
    width:100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  main{
    width: 300px;
    height: 200px;
    border:1px solid red;
    overflow: hidden;
  }
  div{
    width: 200%;
    height: 100%;
    white-space:nowrap;
    animation: hd 4s steps(4,end) infinite;
  }
  main:hover div{
    animation-play-state:paused
  }
  @keyframes hd {
    to{
      transform:translateX(-1200px)
    }
  }
  img{
    width: 50%;
    height: 100%;
  }
</style>
<body>
  <main>
    <div>
      <img src="404.png" alt="">
      <img src="logo.jpg" alt="">
      <img src="logo.jpg" alt="">
      <img src="404.png" alt="">
    </div>
  </main>
    
</body>
<script>
    

    
</script>
</html>
